<template>
    <div class="usersList">
        <V-Header></V-Header>
        <div class="el-main">
            <h3>用户列表</h3>
            <el-table
                :data="tableData4"
                style="width: 100%;margin-top:20px"
                >
                <el-table-column
                fixed
                prop="userId"
                label="用户ID"
                width="80">
                </el-table-column>
                <el-table-column
                prop="username"
                label="用户姓名"
                width="120">
                </el-table-column>
                <el-table-column
                prop="nickname"
                label="昵称"
                width="200">
                </el-table-column>
                <el-table-column
                prop="gender"
                label="性别"
                width="100">
                </el-table-column>
                <el-table-column
                prop="email"
                label="邮箱"
                width="200">
                </el-table-column>
                <el-table-column
                prop="mobilePhone"
                label="手机号码"
                width="120">
                </el-table-column>
                <el-table-column
                prop="position"
                label="职位"
                width="120">
                </el-table-column>
                <el-table-column
                prop="status"
                label="状态"
                width="80">
                </el-table-column>
                <el-table-column
                fixed="right"
                label="操作"
                width="150">
                <template slot-scope="scope">
                    <el-button
                    @click.native.prevent="closeUser(scope.$index, tableData4)"
                    type="text"
                    size="small">
                    禁用
                    </el-button>
                    <el-button
                    @click.native.prevent="openUser(scope.$index, tableData4)"
                    type="text"
                    size="small">
                    启用
                    </el-button>
                    <el-button
                    @click.native.prevent="deleteRow(scope.$index, tableData4)"
                    type="text"
                    size="small">
                    删除
                    </el-button>
                </template>
                </el-table-column>
            </el-table>
            <el-pagination
                :page-size="10"
                @current-change = 'handleCurrentChange'
                layout="prev, pager, next"
                :total="ListData.totalElements">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import VHeader from "@/components/header";
export default {
  name: "usersList",
  data() {
    return {
        tableData4: [],
        ListData:{}
    };
  },
  methods: {
    getUsersListData() {
      this.axios
        .get("/userApl/users?page=0&size=10")
        .then((response) => {
          if(response.data.code == 0){
              this.ListData = response.data.result;
             response.data.result.content.forEach(subItem => {
                      if(subItem.status){
                          subItem.status = '禁用';
                      }else{
                          subItem.status = '启用';
                      }
               });
              this.tableData4 = response.data.result.content;
              
          }else{
             this.$message.error(response.data.msg);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    closeUser(index,row){
        this.axios.put("/userApl/users/"+row[index].userId+"/status",{status:1})
        .then((response) => {
          if(response.data.code == 0){
             this.getUsersListData();
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    openUser(index,row){
        this.axios.put("/userApl/users/"+row[index].userId+"/status",{status:0})
        .then((response) => {
          if(response.data.code == 0){
             this.getUsersListData();
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    deleteRow(index,row){
      this.axios.delete("/userApl/users/"+row[index].userId)
        .then((response) => {
          if(response.data.code == 0){
             this.getUsersListData();
          }else{
              this.$message.error(response.data.msg);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    handleCurrentChange(val){
        let page = val-1;
       this.axios
        .get("/userApl/users?page="+page+"&size=10")
        .then((response) => {
          if(response.data.code == 0){
              this.ListData = response.data.result;
             response.data.result.content.forEach(subItem => {
                      if(subItem.status){
                          subItem.status = '禁用';
                      }else{
                          subItem.status = '启用';
                      }
               });
              this.tableData4 = response.data.result.content;
              
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    
  },
  mounted() {
    this.getUsersListData();
  },
  components: {
    VHeader
  }
};
</script>

<style scoped lang="scss">
.usersList {
  .el-main {
    margin: 70px auto;
    width: 1200px;
    // height: 3000px;
    padding: 0;
    .el-pagination{
        float: right;
    }
  }
}
</style>